/*//////////////////////////////////////////////////////////////////////////
 * 
 * 基本スタイル
 * 
//////////////////////////////////////////////////////////////////////////*/
body {
	font-family: Helvetica, Arial, sans-serif;
	overflow: hidden;
}

h1 {
	text-shadow: 0px 0px 10px rgb(0, 0, 0);
	color: #fff;

	background: url(/image/bubble_tl.png) no-repeat scroll left top;
	padding: 10px 20px 10px 60px;
	border: 1px solid #fdd7bf;
	margin: 0px;
}

h3 {
	background: url(/image/bubble_br.png) no-repeat scroll right center;
	padding: 4px 10px 4px 4px; margin: 0;
	text-shadow: 0px 0px 2px rgb(0, 0, 0);
	color: #fff;
}

#subject {
	background: rgba(0, 0, 0, 0.6);
	top: 0px;
	left: 0px;
	position: absolute;

	border-top: 1px solid #f9b085;
	border-right: 4px solid #f9b085;
	border-bottom: 1px solid #f9b085;
	border-left: 4px solid #f9b085;
	padding: 1px 2px;
	opacity: 0.8;
}

#subject > #topic_desc {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	visibility: hidden;
	opacity: 0;
	padding: 4px 10px 4px 4px; margin: 0;

	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
 
	text-shadow: 0px 0px 8px rgb(0, 0, 0);
	color: #fff;

	-webkit-transition: all 0.3s ease-out;
}
#subject:hover > #topic_desc {
	top: 62px;
	visibility: visible;
	opacity: 1;
	background: rgba(0, 0, 0, 0.4);
}

#chat_window {
	position: absolute;
	width: 300px;
	right: -300px;
	top: 100px;
	opacity: 0;
	background: rgba(0, 0, 0, 0.6); 
	
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all  0.3s ease-in-out;

	border-top: 1px solid #f9b085;
	border-right: 4px solid #f9b085;
	border-bottom: 1px solid #f9b085;
	border-left: 4px solid #f9b085;
	padding: 1px 2px;
}

#chat_window.show {
	right: 0px;
	opacity: 0.8;
}

#chat_window h3 {
	text-shadow: 0px 0px 6px rgb(0, 0, 0);
	width: 284px;
}

#chat { 
	overflow: auto; 
	width: 298px;
	max-height: 300px;
	background: rgba(201, 201, 201, 0.8); 
	border: 1px solid #fdd7bf;
	color: #fff;
}
#chat p {
	padding: 8px; margin: 0; 
}
#chat p:nth-child(odd) {
	background: rgba(102, 102, 102, 0.8); 
}

#input_form {
	background: rgba(0, 0, 0, 0.6);
	min-width: 782px; 
	height:32px;
	padding: 5px 10px; 
	display: block; 
}
#input_form input[type=text] {
	width: 700px;
	padding: 5px;
	background: #fff;
	border: 1px solid #fff;
	
	-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) inset;
	-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) inset;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) inset;
}

#send_msg {
	display: inline;
	cursor: pointer;
}
#send_msg span {
	padding: 3px 15px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	cursor: pointer;

	position: relative;
	background-color: #348ee0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, rgb(255,196,137)), color-stop(0.40, rgb(238,107,0)), color-stop(1, rgb(250,167,100)));
	background: -moz-linear-gradient(center top, rgb(255,196,137) 0%, rgb(238,107,0) 40%, rgb(255,226,198) 100% );
	border: 2px solid #ffc184;
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	text-shadow: rgba(10, 10, 10, 0.8) 0px 0px 3px;
	overflow: hidden;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all  0.3s ease-in-out;
}  
 
#send_msg span:before {
	content: "";
	height: 1.05em;
	width: 92%;
	padding: 0px 0;
	margin-left: -46%;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.25);
	background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
	background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 95%);
}
 
#send_msg span:hover {
	text-shadow: rgba(255, 255, 255, 0.6) 0px 0px 5px;  
 }
.idea_container {
	position: absolute;
}
.idea {
	color: #ffffff;
	font-family: sans-serif;
	text-shadow: 0px 0px 5px rgba(25, 25, 25, 0.8);
	text-align:center;
	
	display: -moz-box;
	-moz-box-pack: center;
	-moz-box-align: center;
	
	display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
	
	display: box;
	box-pack: center;
	box-align: center;
	
	cursor: default;
	-webkit-box-shadow: 0 1em 1em rgba(0,0,0,0.2);

	/* script内で指定
	width: 100px;
	height: 100px;
            
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
	
	border: 1px solid #eee;
	*/
}

.idea_image {
	width: 100px;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all  0.3s ease-in-out;
}
.idea_image:hover {
	margin: -50px;
	width: 200px;
}

.drag_over {
	background: aliceblue;
}

/** 
 * アイデアのアニメーションに関連するスタイル
 */ 
.idea {
	-moz-box-shadow: 0 1em 1em rgba(0,0,0,0.2);
	-webkit-animation-duration: 1.5s;
	-webkit-animation-timing-function: cubic-bezier(0.3, 1, 0.7, 0.9);
	-webkit-animation-iteration-count: 3;
//	-webkit-animation-name: fuyo_motion;
}

.idea.selected {
	-webkit-box-shadow: 0 0 1em rgba(255,96,96,1);
}

.idea.mouseover {
	text-shadow: rgba(255, 255, 255, 0.6) 0px 0px 5px;  
}

/*//////////////////////////////////////////////////////////////////////////
 * 
 * トピック関連ライトボックス
 * 
//////////////////////////////////////////////////////////////////////////*/
#topic_actions, .name_actions
{
	padding-top: 20px;
	padding-bottom: 10px;
	text-align:right;
}

.textbox {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   padding: 5px;
   width: 400px;
}

.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   padding: 8px 19px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 20px;
   font-family: Georgia, Serif;
   text-decoration: none;
   vertical-align: middle;
   cursor: default;
}

.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
}

.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
}

#new_topic_layer, #load_topic_layer, #register_name_layer, #rename_layer, #help_layer
{
	position:absolute;
	display:none;
	background: #65a9d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	background: -moz-linear-gradient(top, #fff, #ccc);
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	padding: 10px;
}

#new_topic_layer h3, #load_topic_layer h3, #register_name_layer h3, #rename_layer h3, #help_layer h3
{
	padding-bottom: 8px;
}

#new_topic_layer strong, #load_topic_layer strong, #register_name_layer strong, #rename_layer strong, #help_layer strong
{
	display: block;
	padding-top: 10px;
}

#load_topic_title { 
	overflow: auto; 
	height: 300px; 
	width: 300px;
	border: 1px solid #eee; 
	font: 13px Helvetica, Arial;
	background: #fff;
}
#load_topic_title ul {
	padding: 0; margin: 0; 
}
#load_topic_title ul li {
	cursor: pointer;
	padding: 8px; margin: 0; 
}
#load_topic_title ul li:nth-child(odd) {
	background: #f6f6f6; 
}
#load_topic_title ul li span {
	font-weight: bold;
	
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all  0.3s ease-in-out;
}
#load_topic_title ul li:hover > span {
	background: rgba(249, 176, 133, 0.5);

	-moz-box-shadow: 0px 0px 10px rgba(249, 176, 133, 0.8);
	-webkit-box-shadow: 0px 0px 10px rgba(249, 176, 133, 0.8);
	box-shadow: 0px 0px 10px rgba(249, 176, 133, 0.8);
}

#cursor_position {
	position: absolute;
	top: 75px;
	right: 0px;
	height: 0px;
	color: #fff;
	text-shadow: 0px 0px 6px rgb(0, 0, 0);
	
}

#notice {
	top: 100px;
	width: 100%;
	
	background: rgba(0, 0, 0, 0.6);

	opacity: 0;
	visibility: hidden;

    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;
    -o-transition: all 10s linear;
    transition: all  10s linear;
}

#notice.show {
	opacity: 0.8;
	visibility: visible;
}

/*//////////////////////////////////////////////////////////////////////////
 * 
 * メニュー部分
 * 
//////////////////////////////////////////////////////////////////////////*/
/**
 * メニュー画像上の動作を定義
 */
#menu div.jqDock {
	cursor:pointer;
}

/**
 * メニューのラベルスタイル
 */
#menu div.jqDockLabel {
	font-weight:bold;
	font-style:italic;
	white-space:nowrap;
	color:#003300;
	cursor:pointer;
	padding:0 8px 5px 0;
}

/**
 * メニューの表示域制御
 */
#menu_container {
	position: absolute;
	top: 0px;
	right: 0px;
}

/**
 * メニューのアニメーション
 */
img.menu_item {
	width: 50px;
	opacity: 0.8;

	z-index: 99999;
	vertical-align: top;
	align: right;

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all  0.3s ease-in-out;

	-webkit-transform-origin; 50% 0%;
	-moz-transform-origin; 50% 0%;
	-o-transform-origin; 50% 0%;
}

img.menu_item:hover {
	width: 100px;
	opacity: 1.0;
}


/*//////////////////////////////////////////////////////////////////////////
 * 
 * アニメーション
 * 
//////////////////////////////////////////////////////////////////////////*/
/** 
 * アイデアがふわふわと漂うアニメーション
 */ 
@-webkit-keyframes fuyo_motion {
	0% {
		-webkit-transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-10px);
	}
	100% {
		-webkit-transform: translateY(0px);
	}
}

/** 
 * アイデアがふわふわと漂う＆光彩を放つアニメーション
@-webkit-keyframes fuyopika_motion {
	0% {
		-webkit-box-shadow: 0 0 5em rgba(255,96,96,0.7);
		-webkit-transform: translateY(0);
	}
	50% {
		-webkit-box-shadow: 0 0 1em rgba(255,96,96,1);
		-webkit-transform: translateY(-10px);
	}
	100% {
		-webkit-box-shadow: 0 0 5em rgba(255,96,96,0.7);
		-webkit-transform: translateY(0px);
	}
}
 */ 

/*//////////////////////////////////////////////////////////////////////////
 * 
 * 画面スクロール用レイヤー
 * 
//////////////////////////////////////////////////////////////////////////*/
/* 
 * スクロールレイヤー （ドラッグ情報を伝達するレイヤー）
 */
#scroll_layer {
	background: transparent url(/image/scroll.png) no-repeat center center;
	position: absolute;
	z-index: -1;
	cursor: move;
}

/* 
 * ビューレイヤー（表示範囲を決めるレイヤー）
 */
#view_layer {
	position: absolute;
	background-color: #e5ecf9;
	top: 0px;
	left: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

/* 
 * キャンバスレイヤー（画面全体のレイヤー）
 */
#canvas_layer {
	background: transparent url(/image/background_pink.png);
	position: absolute;
	top: -4600px;
	left: -4500px;
	right: 4500px;
	bottom: 4600px;
	width: 10000px;
	height: 10000px;
}